<template id="commodity">
    <div>
        <div id="shop_commodity">
            <div class="carousel">
                 <swiper :options="swiperOption" ref="mySwiper" id="carousel">
                    <!-- slides -->
                    <swiper-slide class="swiper_1" v-for="v in goods.goods_gallery">
                        <img  :src="v.img_url" alt="v.img_desc">
                    </swiper-slide>
                    <!-- Optional controls -->
                </swiper>
                <div class="swiper-pagination"></div>
            </div>

            <!--生鲜部分-->
            <div v-if="goods.goods_type == 1">
                <div class="commodity_count">
                    <h3 id="goods_name">{{goods.goods_name}}</h3>
                    <p  id="goods_brief">{{goods.goods_brief}}</p>
                    <p><time>¥</time>{{goods.goods_price}}</p>
                    <div class="commodity_ge">
                        <ul>
                            <li v-for="(v,k) in goods.goods_spec" v-bind:style="k == goods.goods_id ? styleColor : ''" @click="goodInfo(k)">{{v}}</li>
                        </ul>

                    </div>
                </div>
                <ul class="commodity_list">
                    <li>严选</li>
                    <li>专业检测</li>
                    <li>48小时</li>
                </ul>
            </div>

            <!--家居部分-->
            <div class="commodity_mmg" v-if="goods.goods_type == 2">
               <div class="commodity_mmg_1">
                   <p>{{goods.goods_name}}</p>
                   <p>{{goods.goods_brief}}</p>
                   <p>¥{{goods.goods_price}}</p>
               </div>

              <div class="commodity_mmg_2" @click="get_shu()">
                <p>规格数量选择</p>
                  <img src="../image/day.jpg" alt="">
              </div>

               <!--<div class="commodity_mmg_3">
                   <p>1个促销:</p>
                   <p>双十二</p>
                   <p>全场通用200现金卷，省钱省力时间</p>
                   <img src="../image/day.jpg" alt="">
               </div>-->

              <div class="commodity_mmg_4">
                  <p class="commodity_mmg_4_1">宜家家居制造商</p>
                  <ul class="commodity_mmg_ul">
                      <li>小马优选<img src="../image/xing.jpg" alt=""></li>
                      <li>大牌制造<img src="../image/zhuan.jpg" alt=""></li>
                      <li>48小时快速退款<img src="../image/siba.jpg" alt=""></li>
                  </ul>
                  <p class="commodity_mmg_4_pp">直连全球大品牌制造商，严选品质，剔除大牌溢价</p>
              </div>
            </div>

            <!--新版详情页-->
            <div class="commodity_1">
                <div class="commodity_2" @click="commentList(goods.goods_id, 0)">
                   <span>用户评价({{data.comment_num}})</span>
                   <span>{{data.all_percent > 0 ? data.all_percent + '%好评率' : '暂无评论'}}</span>
                   <img src="../image/day.jpg" alt="">
                </div>
                <div v-if="data.comment_num > 0">
                    <div class="commodity_3">
                        <ul>
                            <li @click="commentList(goods.goods_id, 0)">全部({{data.comment_num}})</li>
                            <li @click="commentList(goods.goods_id, 1)">无图({{data.not_img_num}})</li>
                            <li @click="commentList(goods.goods_id, 2)">有图({{data.img_num}})</li>
                        </ul>
                    </div>
                    <div class="commodity_4" v-for="v in comment_list">
                        <p class="commodity_4_6">
                            <i class="icon iconfont icon-cstart-copy-copy rank_orange" v-for="val in v.goods_rank"></i>
                        </p>
                        <p class="commodity_4_1">{{v.nickname}}</p>
                        <p class="commodity_4_2">{{v.add_time}} {{v.goods_attr}}</p>
                        <p class="commodity_4_3">{{v.content}}</p>
                        <div class="commodity_4_4"><img :src="v.headimg" alt="" ></div>
                        <ul class="commodity_4_5" v-if="v.shopimg.length > 0">
                            <li v-for="val in v.shopimg"><img :src="val" alt=""></li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
        <!--商品规格弹窗-->
        <div class="commodity_detail" v-show="ba">
            <div class="commodity_detail_1">
                <img :src="goods_attr_img" alt="">
                <p>价格:{{goods_attr_price}}</p>
                <p>库存:{{goods_attr_number}}</p>
            </div>
            <div v-for="(v,k) in goods.goods_spec_name">
                <p class="commodity_detail_p">{{k}}</p>
                <ul class="commodity_detail_ul_1">
                    <li
                            v-for="val in v.data"
                            @click="setAttrId(v.index, val.id)"
                            v-bind:class="(v.index == 1 ? one_id == val.id : two_id == val.id) ? 'selected' : ''"
                    >
                        {{val.name}}
                    </li>
                </ul>
            </div>
            <p class="commodity_detail_p">数量</p>
            <div class="commodity_detail_mm">
                <span @click="setBuyNumber(1)">－</span>
                <p><input type="text" v-model="buy_goods_number"></p>
                <span @click="setBuyNumber(2)">＋</span>
            </div>
            <p style="height:3.8rem;"></p>
        </div>
        <div class="shop_car"></div>

        <div class="bac" v-if="bac" @click="get_di()"></div>
        <v-shopCardetail></v-shopCardetail>
    </div>
</template>
<script>
    import shopCardetail from './shopCardetail.vue'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default{
        name: 'commodity',
        components:{
            'v-shopCardetail':shopCardetail
        },
        data() {
            return {
                /*背景家具弹窗*/
                bac:false,
                ba:false,
                swiperOption: {//以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/
                    // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，<br>　　　　　　　　假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                    notNextTick: true,
                    // swiper configs 所有的配置同swiper官方api配置
                    autoplay: 2000,
                    direction: 'horizontal',
                    grabCursor: true,
                    pagination: '.swiper-pagination',
                    paginationClickable: true,
                    mousewheelControl: true,
                    observeParents: true,
                    loop: true,
                },
                styleColor:{
                    background:'#24acfe',
                },
                goods_id:this.$route.query.goods_id,
                data:[],
                goods:[],
                comment_list:[],
                guest_type:1,
                guest_val:this.$route.query.goods_id,
                /*限时抢购时间*/
                h_time:'',
                m_time:'',
                s_time:'',
                now_time:'',
                promote_end_date:'',

                goods_type:1, // 1生鲜 2家居

                one_id:0,
                two_id:0,
                goods_attr_price:'', // 当前规格的价格
                goods_attr_img:'', // 当前规格的商品图片
                goods_attr_number:0, // 当前规格的库存

                buy_goods_number:1,
            }
        },
        mounted:function () {
            this.goodsLine(this.goods_id);
            /*let H = $(window).height()-100;
            $('#shop_commodity').height(H);*/

            //分享载入
            /* if(init.isWeiXin()){
                 share.share_wx();
                 share.type ='goods';
                 share.share();
                 share.share_guest();
             }*/
            /*限时抢购时分秒*/
            /*this.countDown('this.promote_end_date');*/

        },
        methods:{
            /*背景消失*/
            get_di:function(){
                this.bac=false;
                this.ba=false;
            },
            /*数量规格的显示*/
            get_shu:function(){
                this.bac=true;
                this.ba=true;
            },
            goodsLine:function (id) {
                this.$http.jsonp(
                    this.GLOBAL.BaseUrl+'/mobile/api/v1/Goods.php?mode=goodsInfo',
                    {
                        params:{
                            goods_id:id,
                            uid:this.GLOBAL.getCookie('uid'),
                            time:this.GLOBAL.getCookie('time'),
                            token:this.GLOBAL.getCookie('token'),
                            session_id:this.GLOBAL.getCookie('user_cart_id'),
                        },
                        jsonp:'callback'
                    }
                ).then(function(res){
                    if (res.body.code != 200) {
                        alert(res.body.msg);
                        return false;
                    }
                    this.data = res.body.data;
                    this.goods = res.body.data.goods;
                    this.comment_list = res.body.data.comment_list;
                    this.promote_end_date = res.body.data.goods.promote_end_date;//限时抢购结束时间
                    this.now_time = res.body.data.goods.now_time;//限时抢购当前时间
                    this.goods_attr_price = '￥' + res.body.data.goods.goods_price;
                    this.goods_attr_img = res.body.data.goods.goods_thumb;
                    this.goods_attr_number = res.body.data.goods.goods_number;

                    this.GLOBAL.setCookie('buy_attr_id', 0);
                    this.GLOBAL.setCookie('buy_goods_number', 0);
                });
            },
            commentList:function (id) {
                this.$router.push('/shopDetails/shopEvaluate?goods_id=' + id);
            },
            goodInfo:function (id) {
                if (id == this.goods_id) {
                    return false;
                }
               /* alert(this.goods_id)*/
                this.$router.push('/shopDetails?goods_id=' + id);
                window.location.reload()
            },

            // 选择规格
            setAttrId : function (index, id) {
                if (index == 1) {
                    this.one_id = id;
                    for(var k in this.goods.goods_spec) {
                        if (this.goods.goods_spec[k].one_id == id) {
                            if (this.two_id > 0) {
                                if (this.goods.goods_spec[k].two_id == this.two_id) {
                                    this.goods_attr_img = this.goods.goods_spec[k].goods_img;
                                    this.goods_attr_price = this.goods.goods_spec[k].two_price;
                                    this.goods_attr_number = this.goods.goods_spec[k].two_number;
                                    this.GLOBAL.setCookie('buy_attr_id', this.goods.goods_spec[k].goods_attr_id);
                                   this.get_di();
                                    break;
                                }
                            } else {
                                this.goods_attr_price = this.goods.goods_spec[k].one_price;
                                this.goods_attr_img = this.goods.goods_spec[k].goods_img;
                                this.goods_attr_number = this.goods.goods_spec[k].one_number;
                                this.two_id = 0;
                                break;
                            }
                        }
                    }
                } else {
                    this.two_id = id;
                    for(var k in this.goods.goods_spec) {
                        if (this.one_id > 0 && this.goods.goods_spec[k].one_id == this.one_id && this.goods.goods_spec[k].two_id == id) {
                            this.goods_attr_price = this.goods.goods_spec[k].two_price;
                            this.goods_attr_number = this.goods.goods_spec[k].two_number;
                            this.GLOBAL.setCookie('buy_attr_id', this.goods.goods_spec[k].goods_attr_id);
                            this.get_di();
                            break;
                        }
                    }
                }
            },

            // 修改购买数量
            setBuyNumber : function (type) {
                if (type == 1) {
                    this.buy_goods_number = this.buy_goods_number > 1 ? this.buy_goods_number - 1 : 1;
                } else {
                    this.buy_goods_number++;
                }

                this.GLOBAL.setCookie('buy_goods_number', this.buy_goods_number);
            },

            // 跳转评论列表
            commentList:function (id, type) {
                type = type ? type : 0;
                this.$router.push('/shopDetails/shopEvaluate?goods_id=' + id + '&type=' + type);
            },
        },
    }

</script>
<style>
    .carousel .swiper-pagination{
        z-index: 3;
    }
   /* .commodity_ge ul #one{
        margin-left:1.2rem;
    }*/
    /*滑动按钮*/
    .bac{
        height:100%;
        width:100%;
        background:#000000;
        opacity: 0.5;
        position:fixed;
        top:0;
        left:0;
        z-index: 2;
    }
    .commodity_detail_mm p{
        height:0.6rem;
        width:1.12rem;
        line-height:0.6rem;
       /* border-top:0.01rem solid red;
        border-bottom:0.01rem solid #cecece;*/
    }
    .commodity_detail_mm p input{
        display:block;
        outline: none;
        border:0;
        height:0.6rem;
        width:1.12rem;
        background: none;
        text-align: center;
       /* line-height:0.6rem;*/
    }
    .commodity_detail_mm span:nth-of-type(1){
        border-right:0.01rem solid #cecece;
    }
    .commodity_detail_mm span:nth-of-type(2){
        border-left:0.01rem solid #cecece;
    }
    .commodity_detail_mm span{
        display:block;
        height: 0.6rem;
        line-height:0.6rem;
        text-align:center;
        color:#808080;
        width:0.8rem;
        font-size:0.26rem;
    }
    .commodity_detail_mm{
        width:2.7rem;
        height:0.62rem;
        display:flex;
        border:0.01rem solid #cecece;
        margin-left:0.2rem;
    }
    /*2*/
    .commodity_detail_ul_2 li{
        height:0.62rem;
        line-height:0.62rem;
        border:0.01rem solid #cecece;
        font-size:0.24rem;
        color:#656565;
        list-style:none;
        width:1.66rem;
        text-align:center;
        border-radius:0.06rem;
        margin-left:0.2rem;
    }
    .commodity_detail_ul_2{
        height:0.64rem;
        width:100%;
        display:flex;
        padding-top:0.02rem;
    }
    .commodity_detail_ul_1 li{
        height:0.62rem;
        line-height:0.62rem;
        border:0.01rem solid #cecece;
        font-size:0.24rem;
        color:#656565;
        list-style:none;
        /*width:1.2rem;*/
        padding:0 0.1rem;
        /*flex:1;*/
        text-align:center;
        border-radius:0.06rem;
        margin-left:0.2rem;
    }

    .commodity_detail_ul_1 li.selected{
        border-color: #2eaffc;
        color: #2eaffc;
    }

    .commodity_detail_ul_1{
        height:0.64rem;
        width:100%;
        display:flex;
        padding-top:0.02rem;
    }
    .commodity_detail_p{
        height:0.6rem;
        width:100%;
        color:#474747;
        font-size:0.26rem;
        line-height:0.6rem;
        text-indent: 0.2rem;
    }
    .commodity_detail_1 p:nth-of-type(2){
        position:absolute;
        height:0.5rem;
        line-height:0.5rem;
        color:#484848;
        font-size:0.24rem;
        left:1.9rem;
        top:1.3rem;
    }
    .commodity_detail_1 p:nth-of-type(1){
        position:absolute;
        height:0.5rem;
        line-height:0.5rem;
        color:#fc4db8;
        font-size:0.24rem;
        left:1.9rem;
        top:0.2rem;
    }
    .commodity_detail_1 img{
        display:block;
        height:1.51rem;
        width:1.51rem;
        border-radius:0.05rem;
        margin:0 0.18rem 0 0.18rem;
    }
    .commodity_detail_1{
        width:100%;
        height:1.68rem;
        padding-top:0.2rem;
        position:relative;
    }
    /*1*/
    .commodity_detail{
        position:fixed;
        left:0;
        bottom:0.8rem;
        background:#ffffff;
        width:100%;
        height:6.15rem;
        z-index: 3;
    }
    /*商品规格弹窗*/
    .commodity_mmg_4_pp{
        width:100%;
        height:0.46rem;
        line-height:0.46rem;
        text-indent: 0.18rem;
        color:#b7b7b7;
        font-size:0.22rem;
    }
    .commodity_mmg_ul li img{
        display:block;
        height:0.29rem;
        width:0.29rem;
        position:absolute;
        top:0.06rem;
        left:0.16rem;
    }
    .commodity_mmg_ul li{
        position:relative;
        height:0.42rem;
        line-height:0.42rem;
        color:#c1c1c1;
        font-size:0.22rem;
        width:auto;
        padding-left:0.6rem;
        list-style:none;
    }
    .commodity_mmg_ul{
        width:100%;
        height:0.42rem;
        display:flex;
        margin-bottom:0.1rem;
    }
    .commodity_mmg_4_1{
        width:100%;
        height:0.56rem;
        font-size:0.3rem;
        line-height:0.56rem;
        color:#434343;
        text-indent: 0.18rem;
    }
    .commodity_mmg_4{
        width:100%;
        height:1.62rem;
        padding-top:0.15rem;
    }
    /*4*/
    .commodity_mmg_3 img{
        height:0.36rem;
        width:0.21rem;
        display:block;
        position:absolute;
        top:0.3rem;
        right:0.2rem;
    }
    .commodity_mmg_3 p:nth-of-type(3){
        height:0.88rem;
        line-height:0.88rem;
        color:#fc1dac;
        font-size:0.24rem;
        width:3rem;
       /* float:left;*/
        margin-left:2.3rem;
         overflow: hidden; /*/*自动隐藏文字*/
         text-overflow: ellipsis;/*/*文字隐藏后添加省略号*/
         white-space: nowrap;
    }
     .commodity_mmg_3 p:nth-of-type(2){
        min-width:0.8rem;
         height:0.28rem;
        /* line-height:0.27rem;*/
         text-align:center;
         color:#fc1dac;
         font-size:0.2rem;
         border:0.01rem solid #fc1dac;
         border-radius:0.05rem;
         position:absolute;
         left:1.34rem;
         top:0.29rem;
    }
    .commodity_mmg_3 p:nth-of-type(1){
        min-width:1.24rem;
        height:0.88rem;
        line-height:0.88rem;
        color:#3c3c3c;
        font-size:0.28rem;
        float:left;
        text-indent: 0.18rem;

    }
    .commodity_mmg_3{
        width:100%;
        height:0.88rem;
        border-bottom:0.1rem solid #f5f4f2;
        position:relative;
    }
    /*3*/
    .commodity_mmg_2 img{
        display:block;
        height:0.36rem;
        width:0.21rem;
        position:absolute;
        top:0.28rem;
        right:0.2rem;
    }
    .commodity_mmg_2 p{
        height:0.89rem;
        line-height:0.89rem;
        color:#4f4f4f;
        font-size:0.28rem;
        text-indent: 0.18rem;
    }
    .commodity_mmg_2{
        width:100%;
        height:0.89rem;
        border-bottom:0.01rem;
        position:relative;
    }
    /*2*/
    .commodity_mmg_1 p:nth-of-type(3){
        height:0.64rem;
        line-height:0.64rem;
        text-align:center;
        font-size:0.26rem;
        color:#fc1dac;
        width:100%;
    }
    .commodity_mmg_1 p:nth-of-type(2){
        height:0.45rem;
        line-height:0.45rem;
        text-align:center;
        font-size:0.26rem;
        color:#c7c7c7;
        width:100%;
    }
    .commodity_mmg_1 p:nth-of-type(1){
        height:0.5rem;
        line-height:0.5rem;
        text-align:center;
        font-size:0.3rem;
        color:#000000;
        width:100%;
    }
    .commodity_mmg_1{
        width:100%;
        height:1.81rem;
        border-bottom:0.1rem solid #f5f4f2;
        padding-top:0.24rem;
    }
    /*1*/
    .commodity_mmg{
        width:100%;
        min-height:4.8rem;
        border-bottom:0.1rem solid #f5f4f2;
    }
    /*新版家具详情页*/
    .commodity_4_6{
        line-height:0.01rem;
        height:0.63rem;
        width:3.37rem;
        padding-left:2.43rem;
        position:absolute;

    }
    .commodity_4_6 i{
      /*  margin-top:-0.2rem;*/
        margin-right:0.1rem;
    }
    /*6*/
     .commodity_4_5 li img{
        display:block;
         height:1.3rem;
         width:1.3rem;
     /*    border:0.01rem solid red;*/

    }
    .commodity_4_5 li{
        list-style:none;
        height:1.3rem;
        width:1.3rem;
        border-radius:0.05rem;
        margin-right:0.1rem;
    }
    .commodity_4_5{
        height:1.56rem;
        width:5.74rem;
        padding-top:0.2rem;
        display:flex;
        padding-left:0.26rem;
        overflow:hidden;
    }
    .commodity_4_4{
        border-radius:50%;
        position:absolute;
        top:0;
        left:0.2rem;
        height:0.62rem;
        width:0.62rem;
    }
    .commodity_4_4 img{
        display:block;
        height:0.62rem;
        width:0.62rem;
    }
    .commodity_4_3{
        min-height:0.46rem;
        line-height:0.46rem;
        color:#4e4e4e;
        font-size:0.24rem;
        padding-left:0.2rem;
    }
    .commodity_4_2{
        height:0.48rem;
        line-height:0.48rem;
        color:#e2e2e2;
        font-size:0.2rem;
        padding-left:0.2rem;
    }
    .commodity_4_1{
        height:0.62rem;
        line-height:0.62rem;
        color:#4d4d4d;
        font-size:0.2rem;
        padding-left:0.88rem;
        margin-bottom:0.05rem;
    }
    .commodity_4{
        width:100%;
        min-height:3.3rem;
        position:relative;
    }
    /*4*/
    .commodity_3 ul li{
     /*   flex:1;*/
        list-style:none;
        line-height:0.5rem;
        text-align:center;
        font-size:0.22rem;
        height:0.5rem;
        width:1.3rem;
        background:#f0f0f0;
        margin-left:0.24rem;
        border-radius:0.1rem;
       /* width:auto;*/
    }
    .commodity_3 ul{
        height:0.82rem;
        width:100%;

        display:flex;
    }
    .commodity_3{
        height:0.82rem;
        padding-top:0.3rem;
        width:100%;
    }
    /*3*/
    .commodity_2 img{
        display:block;
        height:0.36rem;
        width:0.21rem;
        top:0.17rem;
        right:0.17rem;
        position:absolute;
    }
    .commodity_2 span:nth-of-type(2){
        height:0.72rem;
        line-height:0.72rem;
        color:#999999;
        font-size:0.26rem;
        float:right;
        margin-right:0.43rem;
    }
    .commodity_2 span:nth-of-type(1){
        height:0.72rem;
        line-height:0.72rem;
        color:#3d3d3d;
        font-size:0.26rem;
        float:left;
        margin-left:0.2rem;
    }
    .commodity_2{
        height:0.72rem;
        width:100%;
        position:relative;
    }
    .commodity_1{
        min-height:1rem;
        width:100%;
    }
    /*新版详情页*/
    .shop_car{
        height:0.8rem;
        width:100%;
        opacity:0;
    }
    /*底部*/
  /*  #shop_commodity{
       overflow-y: scroll;
    }*/
    .commodity_more{
        width:100%;
        height:0.85rem;
    }
    .commodity_more p{
        margin:auto;
        width:1.61rem;
        height:0.42rem;
        line-height:0.42rem;
        text-align:center;
        color:#313131;
        border:1px solid #313131;
        font-size:0.2rem;
        border-radius:0.2rem;
    }
    .commodity_ping p:nth-of-type(1){
        width:100%;
        height:0.52rem;
    }
    .commodity_ping img{
        position:absolute;
        display:block;
        border-radius:50%;
        width:0.65rem;
        height:0.64rem;
        left:0.3rem;
        top:0.26rem;
    }
    .commodity_ping p:nth-of-type(3){
        width:100%;
        height:0.3rem;
        color:#313131;
        font-size:0.22rem;
        line-height: 0.3rem;
        text-indent: 0.25rem;
    }
    .commodity_ping p:nth-of-type(2){
        width:100%;
        height:0.57rem;
        color:#aeaeae;
        font-size:0.17rem;
        text-indent: 0.25rem;
        line-height:0.57rem;
    }
    .commodity_ping p:nth-of-type(1) span:nth-of-type(2){
        float:right;
        width:1.76rem;
        height:0.52rem;
        line-height:0.52rem;
        text-align:center;
        color:#868686;
        font-size:0.19rem;

    }
    .commodity_ping p:nth-of-type(1) span:nth-of-type(1){
        float:left;
        height:0.52rem;
        width:3.24rem;
        line-height:0.52rem;
       /* text-align:center;*/
        text-indent: 1.04rem;
        color:#313131;
        font-size:0.16rem;
        overflow: hidden; /*!*自动隐藏文字*!*/
        text-overflow: ellipsis;/*!*文字隐藏后添加省略号*!*/
        white-space: nowrap;/*!*强制不换行*!*/
    }
    .commodity_ping{
        width:100%;
        height:1.64rem;
        border-top:1px solid #e6e6e6;
        padding-top:0.36rem;
        position:relative;
    }
    .commodity_p{
        width:100%;
        height:0.58rem;

    }
    .commodity_p span:nth-of-type(1){
        float:left;
        width:1.73rem;
        height:0.58rem;
        line-height:0.58rem;
        text-align:center;
        color:#898989;
        font-size:0.2rem;
    }
    .commodity_p span:nth-of-type(2) time{
        color:#ff7e00;
    }
    .commodity_p span:nth-of-type(2){
        width:1.32rem;
        line-height:0.58rem;
        text-align:center;
        color:#898989;
        font-size:0.2rem;
        float:right;
    }
    .commodity_list{
        width:100%;
        height:0.5rem;
        background:#ffffff;
        border-top:0.1rem solid #f5f4f2;
        border-bottom:0.1rem solid #f5f4f2;
    }
    .commodity_list li{
        list-style:none;
        float:left;
        color:#bababa;
        font-size:0.16rem;
        line-height:0.5rem;
        text-indent: 0.6rem;
        background:url(../image/48.png) no-repeat 0.2rem 0.1rem;
        background-size:0.3rem 0.3rem;

    }
    .commodity_ge ul{
        width:4.2rem;
        min-height:0.53rem;
        display:flex;
        padding-left:1.2rem;
        flex-wrap: wrap;
       /* margin:auto;*/
    }
    .commodity_ge ul li{

        line-height:0.53rem;
        text-align:center;
        color:#ffffff;
        list-style:none;
        font-size:0.18rem;
        background: #bababa;
        border-radius:0.05rem;
        min-width:1rem;
        margin-left:0.2rem;
        margin-bottom:0.1rem;
        padding:0 0.1rem;

    }
    .commodity_ge{
        min-height:0.53rem;
        width:100%;

    }
    .commodity_count{
        min-height:2.39rem;
        width:100%;
        padding-top:0.3rem;
    }
    .commodity_count p:nth-of-type(1){
        width:100%;
        height:0.4rem;
        line-height:0.4rem;
        text-align:center;
        color:#919191;
        font-size:0.2rem;
    }
    .commodity_count p:nth-of-type(2){
        width:100%;
        height:0.68rem;
        line-height: 0.68rem;
        text-align:center;
        color:#ff7200;
        font-size:0.32rem;
    }
    .commodity_count p:nth-of-type(2) time{
        display:inline-block;
        font-size:0.15rem;
    }
    .commodity_count h3{
        width:100%;
        height:0.46rem;
        line-height:0.46rem;
        text-align:center;
        color:#373737;
        font-size:0.27rem;
    }
    .commodity_time p:nth-of-type(1){
        height:0.82rem;
        text-align:center;
        width:2.1rem;
        line-height:0.82rem;
        color:#ffffff;
        font-size:0.26rem;
        float:left;
    }
    .commodity_time p:nth-of-type(2){
        width:2.97rem;
        height:0.82rem;
        line-height:0.82rem;
        text-align:center;
        color:#ffffff;
        font-size:0.2rem;
        float:right;
    }
    .commodity_time p:nth-of-type(2) a{
        display:inline-block;
        text-decoration: none;
        color:#313131;
        background:#ffffff;
        width:0.32rem;
        height:0.36rem;
        font-size:0.16rem;
        line-height:0.36rem;
        text-align:center;
        border-radius:0.05rem;
    }
    .commodity_time{
        height:0.82rem;
        width:100%;
        background: -webkit-linear-gradient(left, #ff94d9 , #fc27b0); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #ff94d9, #fc27b0); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right,  #ff94d9, #fc27b0); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #ff94d9, #fc27b0); /* 标准的语法（必须放在最后） */

    }
    .carousel .swiper-pagination-bullet-active {
        opacity: 1;
        background: #fff;
    }
    .carousel .swiper-pagination {
        position: absolute;
        top: 80%;
        left: 40%;
    }
 /*   .carousel .swiper-pagination{
       position:absolute;
       left:50%;
       top:50%;
   }*/
    .carousel .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        display: inline-block;
        border-radius: 100%;
       /* background: #000;*/
        opacity: 0.2;
        margin: 0 0.1rem;
    }
.carousel{
    width:100%;
    height:6.4rem;
    position:relative;

}
#carousel{
        width:100%;
        height:6.4rem;
}
#carousel .swiper_1{
    width:100%;
    height:6.4rem;
}
    #carousel .swiper_1 img{
        display:block;
        height:6.4rem;
        width:100%;
    }
</style>
